<template>

  <div>
    <div>
      <el-row>
        <el-col :span="4">
          <el-input placeholder="角色名" size="small" v-model="keywords" clearable>
          </el-input>
        </el-col>
        <el-col :span="10">
          <el-button size="mini" style="margin-left: 10px;" type="primary" @click="doquery">
            <i class="iconfont icon-search"></i> 查询
          </el-button>
          <el-button size="mini" type="success" @click="toadd">
            <i class="iconfont icon-add"></i> 添加
          </el-button>
        </el-col>
      </el-row>
      <el-table :data="roles" stripe style="width: 100%" size="mini" highlight-current-row
                @current-change="selectTable">
        <el-table-column prop="id" label="ID" width="180" sortable>
        </el-table-column>
        <el-table-column prop="name" label="角色名" width="180">
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>
        <el-table-column prop="createBy" label="创建人">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="warning" size="mini">
              <i class="iconfont icon-edit"></i>编辑
            </el-button>
            <el-button type="danger" size="mini" @click="delete(scope.row)">
              <i class="iconfont icon-delete"></i> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="margin-top: 10px;" @size-change="pageSizeChange" @current-change="currentPageChange"
                     :current-page="page.cpage"
                     :page-sizes="[5, 10, 20, 30]" :page-size="page.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="page.total">
      </el-pagination>

    </div>

    <el-dialog :title="title" :visible.sync="formVisiable">
      <el-form :model="form">
        <el-form-item label="角色名" :label-width="formLabelWidth +'px'">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth +'px'">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisiable = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="save" size="mini">确 定</el-button>
      </div>
    </el-dialog>

    <div>
      <h4>角色菜单授权</h4>
      <el-tree ref="tree" :data="menus" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
               :default-checked-keys="[]">
        <div class="custom-tree-node" slot-scope="{ node, data }">

          <template v-if="data.type =='0'">
            <div style="width: 120px;">{{data.name}}</div>
            <div style="width: 100px;">
              <el-tag size="small">目录</el-tag>
            </div>
          </template>
          <template v-else-if="data.type =='1'">
            <div style="width: 102px;">{{data.name}}</div>
            <div style="width: 100px;">
              <el-tag type="success" size="small">菜单</el-tag>
            </div>
          </template>
          <template v-else>
            <div style="width: 84px;">{{data.name}}</div>
            <div style="width: 100px;">
              <el-tag type="danger" size="small">按钮</el-tag>
            </div>
          </template>
          <div style="width: 100px;"><i :class="['iconfont',data.icon]"></i></div>
          <div style="width: 100px;">{{data.parentname}}</div>
          <div style="width: 100px;">{{data.url}}</div>
          <div style="width: 100px;">{{data.perms}}</div>
        </div>
      </el-tree>
      <el-row>
        <el-col :span="3" style="padding-left: 20px;">
          <el-checkbox v-model="tree.qx" :disabled='tree.qxdisable' @change="treeqx">全选</el-checkbox>
        </el-col>
        <el-col :span="18" style="display: flex;justify-content: flex-end;">
          <el-button size="mini" style="margin-left: 10px;">
            重置
          </el-button>
          <el-button size="mini" type="primary" @click="editRoleMenus">
            提交
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  let id = 1000;
  import axios from "axios"
  import qs from 'qs'

  export default {

    data() {

      return {
        keywords: "",//查询关键字
        //分页参数
        page: {
          pageSize: 10,
          cpage: 1,
          total: 1
        },
        tree: {
          qx: "false",
          qxdisable: true,
        },
        menus: [],
        roles: [],
        ps: true,
        formLabelWidth: 100,
        formVisiable: false,
        title: "",
        form: {},
        editrowid: 0
      }
    },
    mounted() {
      //请求角色数据
      this.pageQuery();
      this.findAllMenus();
    },

    methods: {

      doquery() {
        this.pageQuery();
      },
      //编辑角色名和角色备注
      save() {
        this.formVisiable = false;
        var that = this;
        var id = this.form.id
        axios.post("/sys/role", qs.stringify(this.form)).then((res) => {
          //保存完了之后返回id，
          that.form.id = res.data;
          if (!id) {
            that.roles.push(that.form);
          }

        })
      },
      //查询所有的菜单
      findAllMenus() {
        var that = this;
        axios.get("/sys/menu/all").then((res) => {
//            that.menus = JSON.parse(JSON.stringify(res.data));
//            console.log(that.menus)
          that.menus = res.data;
        })
      },
      //分页查询
      pageQuery() {
        var that = this;
        axios.get("/sys/role/list", {
          params: {
            pageSize: that.page.pageSize,
            pageNum: that.page.cpage,
            keywords: that.keywords
          }
        }).then(function (response) {
          that.roles = response.data.rows;
          that.page.total = response.data.total;
        });
      },
      /**
       * 改变页码
       */
      currentPageChange(cpage) {
        this.page.cpage = cpage;
        this.pageQuery()
      },
      /**
       * 每页显示条数改变
       */
      pageSizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.pageQuery();
      },
      //选中表格行，回显树菜单
      selectTable(currentRow) {
        this.tree.qxdisable = false;
        this.editrowid = currentRow.id
        var that = this;
        //根据id查询具有的菜单
        axios.get("/sys/role/menus/" + currentRow.id).then((res) => {
          that.$refs.tree.setCheckedKeys(res.data);
        })
      },
      //添加
      toadd() {
        this.title = "添加角色";
        this.formVisiable = true;
        this.form = {};
      },
      //编辑
      edit(row) {
        this.title = "编辑角色"
        this.formVisiable = true;
        this.form = row;
      },
      //删除
      delete: function (row) {

      },
      //获取树选中的ID
      editRoleMenus() {
        console.log();
        var that = this;
        axios.post("/sys/role/editmenus", qs.stringify({
          id: that.editrowid,
          menuids: this.$refs.tree.getCheckedKeys().join(",")
        })).then((res) => {
          that.$message({
            showClose: true,
            type: 'success',
            message: '修改菜单成功'
          })
        });
      },
      //全选
      treeqx(val) {
        var keys = [];
        if (val) {
          keys = [1, 2];
        }
        this.$refs.tree.setCheckedKeys(keys);
      }

    }
  }
</script>

<style>
  .custom-tree-node {
    display: flex;
    /*flex: 1;

        align-items: center;
        justify-content: space-between;*/
    font-size: 14px;
    /*padding-right: 8px;*/
  }
</style>
